<template>
  <div class="dialog">
    <el-dialog :visible="value" show-close width="600px" @close="close">
      <template #title>
        <div>{{ mode === 'edit' ? '编辑品牌' : '添加品牌' }}</div>
      </template>
      <el-form
        ref="form"
        class="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        style="width: 80%"
      >
        <el-form-item label="品牌名称" prop="tmName">
          <el-input v-model.trim="form.tmName" />
        </el-form-item>
        <el-form-item label="品牌logo" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="dev-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="form.logoUrl" :src="form.logoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="btn">
          <el-button @click="close">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { postTradeMark, editTradeMark } from '@/api/product/tradeMark'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      mode: 'add',
      form: {
        tmName: '',
        logoUrl: ''
      },
      rules: {
        tmName: [
          { required: true, message: '请输入商品名称', trigger: 'change' },
          {
            min: 2,
            max: 8,
            message: '请输入2-8位字符',
            trigger: 'change'
          }
        ],
        logoUrl: [
          { required: true, message: '请上传商品图片', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 关闭弹框
    close() {
      // 分为两步(1.还原数据为初次渲染的值 2.清除表单验证(它是异步处理,$nextTick))
      this.$refs.form.resetFields()
      this.form = {
        tmName: '',
        logoUrl: ''
      }
      this.mode = 'add'
      this.$emit('handleClose')
    },
    // 提交
    handleSubmit() {
      this.$refs.form.validate(async(result) => {
        if (result) {
          // console.log('验证通过')
          if (this.mode === 'add') {
            await postTradeMark(this.form)
          } else {
            await editTradeMark(this.form)
          }
          this.$message.success(
            this.mode === 'add' ? '添加品牌成功' : '编辑品牌成功'
          )
          this.close()
          this.$emit(
            'handleCurChange',
            this.mode === 'add' ? 1 : this.pagination.currentPage
          )
        }
      })
    },
    // 上传图片成功
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = URL.createObjectURL(file.raw)
    },
    // 上传图片之前校验
    beforeAvatarUpload(file) {
      const isPng = file.type === 'image/png' || file.type === 'image/jpeg'
      const isLimit = file.size / 1024 / 1024 < 0.5
      if (!isPng) {
        this.$message.error('只能上传jpg/png图片')
      }
      if (!isLimit) {
        this.$message.error('上传图片不能超过500kb')
      }
      return isPng && isLimit
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
::v-deep .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
